<template>
  <div class="preview">
    <div
      class="preview-item"
      v-for="(item, index) in list"
      :key="index"
      @click="preview(item)"
    >
      <img :src="item" />
    </div>
    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
      <img alt="example" style="width: 100%" :src="previewImage" />
    </a-modal>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      previewVisible: false,
      previewImage: ""
    };
  },
  methods: {
    handleCancel() {
      this.previewVisible = false;
    },
    preview(src) {
      this.previewImage = src;
      this.previewVisible = true;
    }
  }
};
</script>

<style lang="less" scoped>
.preview {
  display: flex;

  .preview-item {
    width: 88px;
    margin: 0 8px 8px 0;
    height: 88px;
    overflow: hidden;
    padding: 6px;
    border-radius: 4px;
    border: 1px solid @border-color;
    cursor: pointer;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}
</style>
